<template>
	<view class="layer-iframe" v-if="visible">
		<view class="bg-shadow" ></view>
		<view class="layer-out"  :style="{width:width,height:height}" >
		      
		      <!-- onmousedown, onmousemove, onmouseup -->
		       <!-- 需要有一变量，是否处于拖拽状态 -->
		      <view class="header">
		        <text class="vtitle" v-if="title">{{ title }}</text>  
		        <text class="close" @click="closePop"></text>
		      </view>
		      
		      <view class="content">
		         <slot name="content"></slot>
		      </view>
		</view>
	</view>
  
</template>

<script>
export default {
	name:'PopWindow',
    props:['title','visible','width','height'],
   data(){
     return {
        isMoving:false // 是否处于拖拽状态
     }
   },
   components:{},
   methods:{
    closePop(){
        // this.visible = false;
        this.$emit('update:visible',false);
        // 解决的问题， 让父组件的isVisible和子组件的 visible属性保持一致
        // 方式一：使用v-model
        // 方式二：可以直接使用this.$parent.isVisible修改父组件的值
        // 方式三：可以使用sync破坏单向数据流模式

        // this.$parent.isVisible = false;

    }
   },
   mounted(){ }
}
</script>

<style scoped lang="scss">
.layer-iframe {
	width:100vw;
	height:100vh;
	position: fixed;
	z-index: 100;
	.bg-shadow {
		width:100vw;
		height:100vh;
		background:rgba(0,0,0,0.5);
		position: fixed;
		z-index: 10;
		left:0;
		top:0;
	}
}
.layer-out {
    position: fixed;
    z-index:1000;
    /* 弹框水平垂直居中 */
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
    color:#000;
    display: flex;
    flex-direction: column;
    background: #e6effe url($imageurl+'/introduce/bg_teacher.png') left top no-repeat;
	background-size: cover;
    border-radius: 3.95upx;
	border:1px solid #d5e8ff;
    color: #000;
	padding:11.72upx;
	.vtitle {
		font-size: 12.59upx;
	}
	.close {
		width: 19.53upx;
		height:19.53upx;
		border-radius: 50%;
		background: #e6effe url($imageurl+'/introduce/icon_close.png') center center no-repeat;
		background-size:72%;
		position: absolute;
		right: -2.28upx;
		top: -3.28upx;
	}
    
}

.content {
    flex-grow: 1;
    overflow: auto;
}
.header {
    height: 15.63upx;
    line-height: 15.63upx;
    text-align: left;
    padding-left: 5.86upx;
    padding-right: 5.86upx;
    display: flex;
    justify-content: space-between;
    cursor: move;  
    /* 禁止选中文本 */
    user-select:none;  
	position: relative;
}
.footer {
    height: 15.63upx;
}
</style>